<template>
  <div>
    <el-dialog
      :title="dialogInfo.isAdd ? '添加角色' : '编辑角色'"
      center
      :visible.sync="dialogInfo.isShow"
      :before-close="cancel"
    >
      <!-- ref="roleInfo" -->
      <el-form :model="roleForm" :rules="rules" ref="roleInfo">
        <el-form-item
          label="角色名称"
          :label-width="formLabelWidth"
          prop="rolename"
        >
          <el-input v-model="roleForm.rolename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色权限" :label-width="formLabelWidth">
          <el-tree
            :data="menuList"
            show-checkbox
            node-key="id"
            default-expand-all
            ref="tree"
            :props="{
              children: 'children',
              label: 'title', //名字
            }"
          >
          </el-tree>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="roleForm.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          ></el-switch>
          <!-- active-value打开时的值   inactive-value 关闭时的值  动态绑定-->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addInfo" v-if="dialogInfo.isAdd"
          >添加</el-button
        >
        <el-button type="primary" @click="editInfo" v-else>编辑</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addRole, getRoleInfo, postEditRole } from "../../util/axios";
import { mapActions, mapGetters } from "vuex"; //mapActions这是为了刷新调取
export default {
  data() {
    return {
      roleForm: {
        rolename: "",
        status: 1,
        menus: "",
      },

      formLabelWidth: "120px",

      defaultProps: {
        children: "children",
        label: "label",
      },
      rules: {
        rolename: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters({
      menuList: "menu/getMenuList",
    }),
  },

  components: {},
  mounted() {
    if (this.menuList.length == 0) {
      this.getMenuList();
    }
  },
  methods: {
    ...mapActions({
      getRoleList: "role/getRoleListAction",
      getMenuList: "menu/getMenuListAction",
    }),
    cancel() {
      this.$emit("cancel", false);
      this.reset();
      //  清空验证规则      表单上 ref="roleInfo"
    },
    reset() {
      this.roleForm = {
        rolename: "",
        status: 1,
        menus: "",
      };
      this.$refs.roleInfo.resetFields();
      this.$refs.tree.setCheckedKeys([]);
    },

    addInfo() {
      this.$refs.roleInfo.validate((valid) => {
        if (valid) {
          this.roleForm.menus = this.$refs.tree.getCheckedKeys().join(",");
          console.log(this.$refs.tree.getCheckedKeys());
          //  console.log(this.$refs.tree.getCheckedKeys().join(','),'获取属性结构的值');
          addRole(this.roleForm).then(res => {
            if (res.data.code == 200) {
              console.log(this.roleForm.menus);
              this.$message.success(res.data.msg);
              this.getRoleList();   //触发行动的需要引入mapactions  //从新调取列表也就是添加上一条数据就从新渲染出来
                this.cancel()

            } else {
              this.$message.error(res.data.msg);
            }

            // console.log(res);
          });
        } else {
          return false;
        }
      });
    },
    lookup(id) {
      getRoleInfo({ id }).then((res) => {
        if (res.data.code == 200) {
          this.roleForm = res.data.list;
          // console.log(this.roleForm);
          //重新给tree结构赋值             ?????????????????
          this.$refs.tree.setCheckedKeys(this.roleForm.menus.split(","));
          this.roleForm.id = id;
        }
        // console.log(res);
      });
    },

    editInfo() {
      this.$refs.roleInfo.validate((valid) => {
        if (valid) {
          this.roleForm.menus = this.$refs.tree.getCheckedKeys().join(",");
          //  console.log(this.$refs.tree.getCheckedKeys().join(','),'获取属性结构的值');
          postEditRole(this.roleForm).then((res) => {
            if (res.data.code == 200) {
              this.$message.success(res.data.msg);
              this.getRoleList(); //触发行动的需要引入mapactions  //从新调取列表也就是添加上一条数据就从新渲染出来
              this.cancel();
            } else {
              this.$message.error(res.data.msg);
            }

            console.log(res);
          });
        } else {
          return false;
        }
      });
    },
  },
  props: ["dialogInfo"],
};
</script>

<style lang="" scoped>
</style>
